<template>
    <!-- 登录页面容器，根据当前路由动态设置背景色 -->
    <div class="login-page" :class="loginClass + '-page'">
        <!-- 登录卡片组件，包含整个登录界面内容 -->
        <el-card class="login-card" :class="[loginClass + '-header', 'card-transition']">
            <!-- 使用 Element Plus 容器布局，固定高度为 460px -->
            <el-container style="height: 460px;">
                <!-- 页面头部区域，显示平台标题 -->
                <el-header :class="[loginClass + '-header-page', 'header-transition']">
                    <h1 class="title-transition">小学信息交流平台</h1>
                </el-header>
                <!-- 主体容器，包含左侧菜单和右侧内容区域 -->
                <el-container style="height: 100%;">
                    <!-- 左侧导航菜单栏 -->
                    <el-aside style="height: 100%;">
                        <!-- 菜单组件，启用路由模式，默认激活学生登录项 -->
                        <el-menu 
                            default-active="/login/studentsLogin" 
                            router
                            :class="[loginClass + '-header', 'menu-transition']"
                            style="height: 100%;"
                        >
                            <!-- 学生登录菜单项 -->
                            <el-menu-item index="/login/studentsLogin">
                                <span class="menu-item-transition">学生登录</span>
                            </el-menu-item>
                            <!-- 家长/教师登录菜单项 -->
                            <el-menu-item index="/login/usersLogin">
                                <span class="menu-item-transition">家长/教师登录</span>
                            </el-menu-item>
                            <!-- 学校登录菜单项 -->
                            <el-menu-item index="/login/schoolLogin">
                                <span class="menu-item-transition">学校登录</span>
                            </el-menu-item>
                            <!-- 平台登录菜单项 -->
                            <el-menu-item index="/login/platformLogin">
                                <span class="menu-item-transition">平台登录</span>
                            </el-menu-item>
                        </el-menu>
                    </el-aside>
                    <el-scrollbar height="100%" class="login-scrollbar">
                    <!-- 右侧主内容区域，用于展示不同登录表单 -->
                    <el-main :class="[loginClass + '-header', 'main-transition']" style="margin: 10px;">
                        
                        <!-- 使用 router-view 插槽实现路由组件的过渡动画 -->
                        <router-view v-slot="{ Component }">
                            <!-- 淡入淡出过渡效果 -->
                            <transition name="fade" mode="out-in">
                                <component :is="Component" />
                            </transition>
                        </router-view>
                        
                    </el-main>
                    </el-scrollbar>
       
                    
                </el-container>
            </el-container>
        </el-card>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

// 获取当前路由对象
const route = useRoute();

/**
 * 计算属性：根据当前路由路径确定登录类型对应的 CSS 类名前缀
 * 
 * @returns {string} 返回值说明：
 *   - 'students'：当路径包含 '/login/studentsLogin'
 *   - 'users'：当路径包含 '/login/usersLogin'
 *   - 'school'：当路径包含 '/login/schoolLogin'
 *   - 'platform'：当路径包含 '/login/platformLogin'
 *   - 默认返回 'students'
 */
const loginClass = computed(() => {
    const path = route.path;
    if (path.includes('/login/studentsLogin')) return 'students';
    if (path.includes('/login/usersLogin')) return 'users';
    if (path.includes('/login/schoolLogin')) return 'school';
    if (path.includes('/login/platformLogin')) return 'platform';
    return 'students';
});
</script>

<style scoped>
/* 登录页面基础样式：全屏显示并启用背景色过渡动画 */
.login-page {
    width: 100vw;
    height: 100vh;
    display: flex;
    transition: background-color 0.5s ease;
}

/* 登录卡片样式：居中显示，尺寸为屏幕的 70% × 60%，启用过渡动画 */
.login-card {
    width: 70%;
    height: 60%;
    margin: auto;
    transition: all 0.5s ease;
}

/* 文字颜色统一设为白色，并添加过渡动画 */
span, h1 {
    color: white;
    transition: all 0.3s ease;
}

/* 不同登录类型的页面背景色定义 */
.students-page { background-color: #FFD166; }
.users-page { background-color: #06D6A0; }
.school-page { background-color: #118AB2; }
.platform-page { background-color: #073B4C; }

/* 不同登录类型的头部背景色定义 */
.students-header { background-color: #FF9F1C; }
.users-header { background-color: #00B4A0; }
.school-header { background-color: #0A7B96; }
.platform-header { background-color: #052D3D; }

/* 不同登录类型的页面头部背景色定义 */
.students-header-page { background-color: #FF9F1C; }
.users-header-page { background-color: #00B4A0; }
.school-header-page { background-color: #0A7B96; }
.platform-header-page { background-color: #052D3D; }

/* 各类过渡动画定义 */
.card-transition {
    transition: all 0.5s ease, border-color 0.5s ease;
}

.header-transition {
    transition: background-color 0.5s ease;
}

.title-transition {
    transition: color 0.5s ease, transform 0.3s ease;
}

.menu-transition {
    transition: background-color 0.5s ease;
}

.menu-item-transition {
    transition: color 0.3s ease, transform 0.2s ease;
}

/* 菜单项悬停时向右移动 5px */
.menu-item-transition:hover {
    transform: translateX(5px);
}

.main-transition {
    transition: background-color 0.5s ease;
}

/* 淡入淡出过渡动画配置 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 菜单项悬停时的样式增强 */
.el-menu-item:hover .menu-item-transition {
    transform: translateX(5px);
    color: #fff;
}

/* 卡片悬停时上移并增加阴影效果 */
.el-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.login-scrollbar {
    width: 100%;
}
</style>
